import React, { useEffect } from 'react';
import { Form, Icon } from 'antd';
import styles from '@/pages/WorkFlow/components/FormControls/index.less';
import { ReactSortable } from 'react-sortablejs';
import AutoRenderComponent from '../AutoRenderComponent';
import { saveDrawingList } from '../../utils/db';

const { Item } = Form;

const DraggableItem = props => {
    const {
        dispatch,
        onSelect,
        listCenter,
        setListCenter,
        form,
        resetRightForm,
        onDelete,
        activeData,
        setActiveData,
        sortIndex,
        setSortIndex
    } = props;

    const { getFieldDecorator } = form;

    const handleDelete = (e, subItem) => {
        e.stopPropagation();
        e.preventDefault();
        if (onDelete) {
            onDelete(subItem);
        }
    };

    useEffect(() => {
        if (sortIndex > -1) {
            onSelect(listCenter[sortIndex]);
            setSortIndex(-1);

            // 判断是否为带条件的套件
            const obj = listCenter[sortIndex];
            if (obj.proCondition) {
                dispatch({
                    type: 'workFlowModel/addPCondition',
                    payload: obj
                });
            }
        }
        saveDrawingList(listCenter);
    }, [listCenter]);

    return (
        <>
            <Form className={styles.renderList} layout="vertical">
                <ReactSortable
                    list={listCenter}
                    setList={param => {
                        const idprev = `_${new Date().getTime()}_`;
                        const newList = [...param].map((item, index) => ({
                            ...item,
                            key: item.formId || `${item.tag}${idprev}${index}`,
                            formId: item.formId || `${item.tag}${idprev}${index}`
                        }));
                        setListCenter(newList);
                    }}
                    onAdd={evt => {
                        const { newIndex } = evt;
                        setActiveData(null);
                        setSortIndex(newIndex);
                        resetRightForm();
                    }}
                    // sort={false}
                    className={styles.renderMain}
                    animation={150}
                    group={{ name: 'disable-group-name', pull: 'clone' }}
                    dragoverBubble
                >
                    {listCenter.map((subItem, index) => (
                        <div
                            key={index.toString()}
                            className={styles.componentsItem}
                            onClick={() => {
                                resetRightForm();
                                onSelect(subItem);
                                // setSortIndex(index);
                            }}
                        >
                            <div
                                className={`${styles.componentsBody} ${
                                    activeData && activeData.formId === subItem.formId
                                        ? `${styles.current}`
                                        : `${styles.current1}`
                                }`}
                            >
                                {subItem.cmpType === 'common' ? (
                                    <Item
                                        label={
                                            subItem.type === 'Title' || subItem.type === 'Link' ? null : subItem.label
                                        }
                                        key={subItem.key}
                                        extra={subItem.extra}
                                        {...subItem.layout}
                                    >
                                        {getFieldDecorator(subItem.key, {
                                            rules: subItem.rules
                                        })(<AutoRenderComponent form={form} config={subItem} />)}
                                    </Item>
                                ) : (
                                    <Item>
                                        <AutoRenderComponent form={form} config={subItem} />
                                    </Item>
                                )}
                                <span className={styles.deleteBtn} title="删除" onClick={e => handleDelete(e, subItem)}>
                                    <Icon type="close" />
                                </span>
                            </div>
                        </div>
                    ))}
                </ReactSortable>
            </Form>
        </>
    );
};
export default Form.create()(DraggableItem);
